<template>
	<div class="system-dicManager-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="880px">

			<el-card shadow="hover">
				<el-form ref="editDialogFormRef" :model="state.ruleForm" :rules="rules" size="default" label-width="160px">
					<el-row :gutter="24">
						<el-col :span="12" class="mb20">
							<el-form-item label="币种1" prop="coin1Id">
								<el-select v-model="state.ruleForm.coin1Id" placeholder="请选择" clearable style="width: 100%" :disabled="state.dialog.type == 'edit'">
									<el-option v-for="i in state.coinList" :key="i.coinId" :value="i.coinId" :label="i.coinSymbol + '(' + i.coinName + ')'">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12" class="mb20">
							<el-form-item label="币种2" prop="coin2Id">
								<el-select v-model="state.ruleForm.coin2Id" placeholder="请选择" clearable style="width: 100%" :disabled="state.dialog.type == 'edit'">
									<el-option v-for="i in state.coinList" :key="i.coinId" :value="i.coinId" :label="i.coinSymbol + '(' + i.coinName + ')'">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :span="10" class="mb20">
							<el-form-item label="价格" prop="price">
								<el-input v-model="state.ruleForm.price" placeholder="价格" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="2" ><span>{{ coin2Symbol }}/{{ coin1Symbol }}</span></el-col>
						<el-col :span="10" class="mb20">
							<el-form-item label="费率" prop="chargePercent">
								<el-input v-model="state.ruleForm.chargePercent" placeholder="费率" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="2" ><span>{{ state.ruleForm.chargePercent*100 }}%</span></el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :span="10" class="mb20">
							<el-form-item label="最小兑换数量" prop="coin1MinLimit">
								<el-input v-model="state.ruleForm.coin1MinLimit" placeholder="最小兑换数量" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="2" ><span>{{ coin1Symbol }}</span></el-col>
						<el-col :span="10" class="mb20">
							<el-form-item label="最大兑换数量" prop="coin1MinLimit">
								<el-input v-model="state.ruleForm.coin1MaxLimit" placeholder="最大兑换数量" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="2" ><span>{{ coin1Symbol }}</span></el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :span="10" class="mb20">
							<el-form-item label="币种1限额(全网/天)" prop="coin1LimitPerDay">
								<el-input v-model="state.ruleForm.coin1LimitPerDay" placeholder="币种1全网兑换限额(全网/天)" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="2" ><span>{{ coin1Symbol }}</span></el-col>
						<el-col :span="10" class="mb20">
							<el-form-item label="币种2限额(全网/天)" prop="coin2LimitPerDay">
								<el-input v-model="state.ruleForm.coin2LimitPerDay" placeholder="币种2全网兑换限额(全网/天)" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="2" ><span>{{ coin2Symbol }}</span></el-col>
					</el-row>
					<el-row :gutter="24">
						<el-col :span="10" class="mb20">
							<el-form-item label="币种1限额(用户/天)" prop="coin1LimitUserPerDay">
								<el-input v-model="state.ruleForm.coin1LimitUserPerDay" placeholder="币种1全网兑换限额(用户/天)" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="2" ><span>{{ coin1Symbol }}</span></el-col>
						<el-col :span="10" class="mb20">
							<el-form-item label="币种2限额(用户/天)" prop="coin2LimitUserPerDay">
								<el-input v-model="state.ruleForm.coin2LimitUserPerDay" placeholder="币种2全网兑换限额(用户/天)" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="2" ><span>{{ coin2Symbol }}</span></el-col>
					</el-row>
				</el-form>
			</el-card>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
				</span>
			</template>
		</el-dialog>

	</div>
</template>

<script setup lang="ts" name="flashSwapPairEditDialog">
import { ElMessage } from 'element-plus';
import { computed, reactive, ref, watch } from 'vue';

// 导入接口
import { useFundApi } from '/@/api/fund/index';
import { flashSwapApi } from '/@/api/flashSwap/index';

const editDialogFormRef = ref();

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

const mustLagerAndEqualThanZero = [
	{ required: true, message: "请输入", trigger: "blur" },
	{
		validator: (rule: any, value: any, callback: any) => {
			if (value >= 0) return callback();
			else return callback(new Error(`必须大于0`))
		}
	}
]

const rules = {

	coin1Id: [
		{ required: true, message: "请选择", trigger: "blur" }
	],
	coin2Id: [
		{ required: true, message: "请选择", trigger: "blur" }
	],
	chargePercent: [
		{ required: true, message: "请输入", trigger: "blur" },
		{
			validator: (rule: any, value: any, callback: any) => {
				if (value >= 0 && value <= 1) return callback();
				else return callback(new Error(`请输入0到1的数字`))
			}
		}
	],
	price: [
		{ required: true, message: "请输入", trigger: "blur" },
		{
			validator: (rule: any, value: any, callback: any) => {
				if (value > 0) return callback();
				else return callback(new Error(`必须大于0`))
			}
		}
	],
	coin1LimitPerDay: mustLagerAndEqualThanZero,
	coin1LimitUserPerDay: mustLagerAndEqualThanZero,
	coin2LimitPerDay: mustLagerAndEqualThanZero,
	coin2LimitUserPerDay: mustLagerAndEqualThanZero,
	coin1MinLimit: mustLagerAndEqualThanZero,
	coin1MaxLimit: mustLagerAndEqualThanZero,

}

const ruleFormInit = {
	chargePercent: 0,
	coin1Id: null,
	coin1LimitPerDay: null,
	coin1LimitUserPerDay: null,
	coin1MaxLimit: null,
	coin1MinLimit: 0,
	coin2Id: null,
	coin2LimitPerDay: null,
	coin2LimitUserPerDay: null,
	price: null
}

const state = reactive({
	row: null as any,
	leveList: [] as any,
	coinList: [] as any,
	ruleForm: ruleFormInit,
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
});


// 打开弹窗
const openDialog = async (type: string, row?: any) => {
	await getcoinList();
	if (type === 'edit') {
		state.row = row;
		state.ruleForm = Object.assign({}, row)
		state.dialog.title = '编辑';
		state.dialog.submitTxt = '更新';
	} else {
		state.ruleForm = state.ruleForm = Object.assign({}, ruleFormInit);
		state.dialog.title = '新增';
		state.dialog.submitTxt = '确定';
		editDialogFormRef.value?.clearValidate();
	}
	state.dialog.type = type;
	state.dialog.isShowDialog = true;


};

const getcoinList = async () => {
	let listTemp = await useFundApi().getcoinList();
	state.coinList = listTemp;
}



// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = async () => {
	editDialogFormRef.value.validate(async (valid: any) => {
		if (valid) {
			//检查参数列表

			try {
				if (state.dialog.type == 'add') {
					await flashSwapApi().swapPairCreate(state.ruleForm);
				} else if (state.dialog.type == 'edit') {
					await flashSwapApi().swapPairUpdate(state.ruleForm);
				}
				ElMessage.success("操作成功");
				closeDialog(); // 关闭弹窗
				emit('refresh');
			} catch (error: any) {
				ElMessage.error("操作失败请稍后再试");
			}
		} else {
			ElMessage.warning("请检查数据的正确性！");
		}
	})
};


let coin1Symbol = computed(() => {

	for (let index = 0; index < state.coinList.length; index++) {
		const element = state.coinList[index];
		if (element.coinId == state.ruleForm.coin1Id) {
			return element.coinSymbol;
		}
	}
	return null;
});

let coin2Symbol = computed(() => {

	for (let index = 0; index < state.coinList.length; index++) {
		const element = state.coinList[index];
		if (element.coinId == state.ruleForm.coin2Id) {
			return element.coinSymbol;
		}
	}
	return null;
});



watch(
	() => state.dialog.isShowDialog,
	(newValue) => {
		if (newValue == true) {
		}
	}, { immediate: true }
);




// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style lang="scss">
.el-select {
	width: 100% !important;
}



.system-dicManager-dialog-container {
	.bar_tools {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.el-table__expanded-cell {
		padding: 20px;
	}
}
</style>